<template>
  <div class="login" :style="{backgroundImage: 'url(' + (bacImage[picNum]) + ')'}">
    <div class="login_bg">
      <div class="login_title">
        <h4>构建条的管理和块的治理协同机制</h4>
      </div>
      <div class="login_cn">
          <div class="login_left">
            <p>“深化简政放权、放管结合、优化服务改革，全面实行政府权责清单制度”。</p>
            <p>——《中共中央关于制定国民经济和社会发展第十四个五年规划和二O三五年远景目标的建议》</p>
          </div>
          <div class="login_right">
            <el-tabs v-model="login_Active" class="tab">
              <el-tab-pane label="管理登录" name="first">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="" prop="username">
                    <span>单位ID号：</span>
                    <el-input type="text" v-model="ruleForm.username" autocomplete="off" placeholder="用户名"></el-input>
                    <i class="el-icon-user"></i>
                  </el-form-item>
                  <el-form-item label="" prop="password">
                    <span>密码：</span>
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="密码" @keyup.enter.native="submitForm('ruleForm')"></el-input>
                    <i class="el-icon-lock"></i>
                  </el-form-item>
                  <el-form-item label="" prop="">
                    <el-checkbox v-model="checked" class="mima">记住密码</el-checkbox>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
      </div>
      <div class="footer_bg">
        <el-footer></el-footer>
      </div>
    </div>
  </div>
</template>

<script>
import elFooter from '@/components/footer'
import {login,newclass} from '@/utils/index.js'



export default {
  data(){
    return{
      bacImage:[require('../assets/back.jpg'),require('../assets/back2.jpg'),require('../assets/back3.jpg')],
      login_Active:'first',
      checked: false,
      ruleForm: { 
          username:'',
        passowrd:''
      },
      rules: {
        
      },
      ctypeTwo:'',
      type:'',
      ctype:'',
      twoList:[],
      lists:[],
      num:'0',
      picNum:'0',
    }
  },
  created(){
    newclass().then((res)=>{
      this.lists  = res.data
      this.ctypeId = res.data[0].child[0].id
      this.twoList = res.data[0].child
      console.log(this.lists)
      this.type=res.data[0].id
        this.ctype=res.data[0].child[0].id
    })
    setInterval(()=>{
      if(this.picNum>=2){
        this.picNum='0'
      }else{
        this.picNum++
      }
    },5000)
  },
  components:{
    elFooter
  },
  mounted(){
    
  },
  methods:{
    // 提交
    submitForm(formName) {
        console.log(this.ruleForm)
        this.$refs[formName].validate((valid) => {
          if (valid) {

            login(this.ruleForm).then((res)=>{
              console.log(res)
              
            })  
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
  }
}
</script>

<style lang="scss" scoped>

.active{
    background-color: #22598f;
    color: white;
    object-fit: contain;
}
.login{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 100% 100%;
  transition: all 1.5s;
}
.login_bg{
  width: 1000px;
  margin: 0 auto;
  margin-top: 200px;
}
.login_bg .login_title{
  color: #333;
  font-size: 23px;
  line-height: 90px;
  padding-left: 30px;
  background: linear-gradient(to right , #d6ecf9 , #f5fdff);
}
.login_bg .login_title p{
  font-size: 14px;
  margin-top: 15px;
}
.login_bg .login_title h4{
  font-size: 35px;
  vertical-align: middle;

}
.login_bg .login_title h4 span{
  font-weight: 500;
  font-size: 18px;
  vertical-align: middle;
}
.login_bg .login_title h4 span:nth-child(1){
  margin: 0 15px;
}
.login_cn{
  overflow: auto;
  width: 100%;
  background: #ffffff;
  min-height: 300px;
  padding: 30px;
  // box-shadow: 1px 1px 10px #d2bfbf;
  box-sizing: border-box;
}
.login_left{
  display: inline-block;
  width: 500px;
  vertical-align: top;
  margin-top: 50px;
}
.login_left p{
  line-height: 30px;
}
.login_right{
  display: inline-block;
  width: 300px;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
.tab::v-deep{
  .el-tabs__nav-wrap::after{
    background: none;
  }
  .el-tabs__item.is-active{
    color: #22598f;
  }
  .el-tabs__active-bar{
    background-color: #22598f;
  }
  .el-tabs__header{
    margin-bottom: 22px;
  }
  .is-top{
    padding: 0 7px;
  }
  .el-tabs__item{
    padding: 0 20px;
    font-size: 18px;
  }
}
.demo-ruleForm::v-deep{
  margin-top: 30px;
  width: 100%;
  .el-form-item{
    margin-bottom: 25px;
  }
  .el-form-item__content{
    margin-left: 0 !important;
    position: relative;
  }
  .el-form-item__content i{
    font-size: 18px;
    position: absolute;
    top: 10px;
    left: 84px;
  }
  .el-input{
    width: 70%;
  }
  .el-input input{
    padding-left: 38px;
    border-radius: 25px;
  }
  .mima{
    margin-left: 75px;
    span{
      width: 15px !important;
    }
  }
  .el-form-item__content{
    span{
      display: inline-block;
      width: 71px;
    }
  }
  .el-checkbox__label{
    color: #a5a5a7;
  }
  .el-form-item:nth-child(3){
    margin-top: -10px;
    margin-left: 7px;
  }
  button{
    width: 100%;
    border-radius: 25px;
    background: linear-gradient(to right,#6097d7,#4bb8cf);
    font-size: 18px;
  }
  .el-input__suffix{
    display: none;
  }
}
.list_tab{}
.list_tab ul{
    margin-left: 10px;
}
.list_tab ul li{
    display: inline-block;
    padding: 3px 17px;
    border-radius: 20px;
    font-size: 14px;
}
.list_tab ul li:hover{
    cursor: pointer;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.login_right::v-deep{
  .el-tabs__nav-wrap{
    padding-left: 0px;
  }
  .el-tabs__item.is-active{
    font-size: 24px;
  }
}
.footer_bg{
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}
</style>